<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            height: 200px;
            display: block;
            margin-bottom: 20px;

        }
    </style>
</head>

<body>
    <img lazyload="true"
        data-origin="https://bpic.588ku.com/video_library/cover/24/09/20/56e3b606d41a95b7d279c17a030dc9b4_snapshot_t0.jpg"
        alt="">
    <img lazyload="true" data-origin="https://img2.baidu.com/it/u=625518108,3004848561&fm=253&fmt=auto&app=138&f=JPEG?w=745&h=500" alt="">
    <img lazyload="true"
        data-origin="https://img1.baidu.com/it/u=4283366487,4202559675&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        alt="">
    <img lazyload="true"
        data-origin="https://img0.baidu.com/it/u=893874537,719635393&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <img lazyload="true"
        data-origin="https://gbres.dfcfw.com/Files/iimage/20240323/57925CD649CFE009CCCA98FE52E468C4_w5404h3638.jpg"
        alt="">
    <img lazyload="true"
        data-origin="https://img0.baidu.com/it/u=855319930,4275932786&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        alt="">
    <img lazyload="true"
        data-origin="https://img0.baidu.com/it/u=1241101883,3290258568&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt="">
    <img lazyload="true"
        data-origin="https://n.sinaimg.cn/sinakd20110/0/w2048h1152/20240624/e3bb-814bbab996807e6d8233c13903d06e17.jpg"
        alt="">
    <img lazyload="true" data-origin="https://picx.zhimg.com/v2-67f576a3f58ab2d5d2eef07dcb7b14a3_r.jpg" alt="">
    <img lazyload="true"
        data-origin="https://img1.baidu.com/it/u=719435224,3466476338&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        alt="">
    <img lazyload="true"
        data-origin="https://img0.baidu.com/it/u=1340708445,1349846606&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt="">
    <script>
        //获取屏幕的高度
        let viewHeight = window.innerHeight
        function lazyLoad() {
            //获取所有的图片
            let imgs = document.querySelectorAll('img[data-origin][lazyload]')//表示img标签且拥有data-origin和lazyload属性
            imgs.forEach(item => {
                //判断图片是否出现在可视区域内
                let rect = item.getBoundingClientRect()//获取图片的位置信息
                if (rect.top < viewHeight && rect.bottom > 0) {
                    //图片出现在可视区域内
                    item.src = item.dataset.origin//将data-origin属性的值赋值给src属性
                    item.removeAttribute('lazyload')//移除lazyload属性
                }
            })
        }
        //调用函数
        lazyLoad()
        //监听滚动事件
        window.addEventListener('scroll', () => {
            throttle(lazyLoad,1000)

        })
        function throttle(fn, delay) {
            let oldTime=Date.now()
            return function (...arg){
                let newTime=Date.now()
                if(newTime-oldTime>delay){
                    fn.apply(this,arg)
                    oldTime=newTime
                }
            }
        }

    </script>
</body>

</html>